<template>
  <div class="order-report-search">
    <ElForm :model="searchForm" :inline="true" label-width="80px">
      <ElFormItem label="订单号">
        <ElInput
          v-model="searchForm.orderNo"
          placeholder="请输入订单号"
          clearable
          style="width: 200px"
        />
      </ElFormItem>

      <ElFormItem label="订单类型">
        <ElSelect
          v-model="searchForm.orderType"
          placeholder="请选择订单类型"
          clearable
          style="width: 150px"
        >
          <ElOption label="入库单" value="1" />
          <ElOption label="出库单" value="2" />
          <ElOption label="移库单" value="3" />
          <ElOption label="盘点单" value="4" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="仓库">
        <ElSelect
          v-model="searchForm.warehouseId"
          placeholder="请选择仓库"
          clearable
          style="width: 200px"
        >
          <ElOption
            v-for="warehouse in warehouseOptions"
            :key="warehouse.value"
            :label="warehouse.label"
            :value="warehouse.value"
          />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="商户">
        <ElInput
          v-model="searchForm.merchantName"
          placeholder="请输入商户名称"
          clearable
          style="width: 200px"
        />
      </ElFormItem>

      <ElFormItem label="订单状态">
        <ElSelect
          v-model="searchForm.status"
          placeholder="请选择订单状态"
          clearable
          style="width: 150px"
        >
          <ElOption label="草稿" value="0" />
          <ElOption label="待处理" value="1" />
          <ElOption label="处理中" value="2" />
          <ElOption label="已完成" value="3" />
          <ElOption label="已取消" value="4" />
        </ElSelect>
      </ElFormItem>

      <ElFormItem label="创建时间">
        <ElDatePicker
          v-model="searchForm.createTimeRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          style="width: 240px"
        />
      </ElFormItem>

      <ElFormItem>
        <ElButton type="primary" @click="handleSearch">
          <ElIcon><Search /></ElIcon>
          搜索
        </ElButton>
        <ElButton @click="handleReset">
          <ElIcon><Refresh /></ElIcon>
          重置
        </ElButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

<script setup lang="ts">
import { reactive, computed, onMounted } from "vue";
import { Search, Refresh } from "@element-plus/icons-vue";
import { useWmsStore } from "@/store/modules/wms";

defineOptions({ name: "OrderReportSearch" });

// 定义事件
const emit = defineEmits<{
  search: [params: any];
  reset: [];
}>();

// 使用WMS store
const wmsStore = useWmsStore();

// 搜索表单
const searchForm = reactive({
  orderNo: "",
  orderType: "",
  warehouseId: undefined as number | undefined,
  merchantName: "",
  status: "",
  createTimeRange: [] as string[],
});

// 仓库选项
const warehouseOptions = computed(() => wmsStore.warehouseOptions);

// 搜索
const handleSearch = () => {
  const params: any = {
    orderNo: searchForm.orderNo || undefined,
    orderType: searchForm.orderType || undefined,
    warehouseId: searchForm.warehouseId,
    merchantName: searchForm.merchantName || undefined,
    status: searchForm.status || undefined,
  };

  // 处理时间范围
  if (searchForm.createTimeRange && searchForm.createTimeRange.length === 2) {
    params.createTimeStart = searchForm.createTimeRange[0];
    params.createTimeEnd = searchForm.createTimeRange[1];
  }

  emit("search", params);
};

// 重置
const handleReset = () => {
  Object.assign(searchForm, {
    orderNo: "",
    orderType: "",
    warehouseId: undefined,
    merchantName: "",
    status: "",
    createTimeRange: [],
  });
  emit("reset");
};

// 初始化
onMounted(async () => {
  // 加载仓库数据
  await wmsStore.getWarehouseList();
});
</script>

<style lang="scss" scoped>
.order-report-search {
  padding: 16px;
  background: var(--el-bg-color-page);
  border-radius: 4px;
  margin-bottom: 16px;

  .el-form-item {
    margin-bottom: 16px;
  }
}
</style>
